
<template>
	<div class="w-page w-aboutus">
		<!-- 头部 -->
		<Header navNum="2"></Header>
		<!-- 内容 -->
		<div class="conbox">
			<div class="w-width">
				<!-- 正文内容开始 -->
				<div class="w-cardbox">
					<div class="w-card flex hs vs">
						<div class="w-card-left">
							<div class="menuList shrink0">
								<div class="w-contitle">{{pageName}}</div>
								<ul>
									<li v-for="(item,index) in menuList" :key="index" :class="{active:num==index}" @click="getNum(index,item)">
										<div class="w-menuLeftbox flex hs vc">
											<p class="dian"></p>
											<p class="w-leftname">{{item.name}}</p>
										</div>
									</li>
								</ul>
							</div>
							<div class="w-banner_right">
								<div class="w-xiang">相关操作</div>
								<ul>
									<li>
										<router-link to="">捐赠途径</router-link>
										<img src="../assets/img/index/line.png" alt="">
									</li>
									<li>
										<router-link to="">捐赠流程</router-link>
										<img src="../assets/img/index/line.png" alt="">
									</li>
									<li>
										<router-link to="">捐赠答疑</router-link>
									</li>
								</ul>
								<router-link to="" class="todonate">我要捐赠</router-link>
								<div class="phonebox flex hc vc">
									<img src="../assets/img/index/phone.png" alt="" class="phoneimg">
									<p>0357-2051369</p>
								</div>
							</div>
						</div>

						<div class="tabCon">
							<div class="w-tabtop flex hs vc">
								<img src="../assets/img/index/home.png" alt="" class="w-home">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
									<el-breadcrumb-item>{{pageName}}</el-breadcrumb-item>
									<el-breadcrumb-item>{{title}}</el-breadcrumb-item>
								</el-breadcrumb>
							</div>
							<div>
								<div class="w-tabtitle" v-for="(item,index) in menuList" :key="index" v-show="num==index">{{title}}</div>
								<div v-show="num==0">
									<div class="w-tabcon">
										<p>山西师范大学教育基金会于1994年正式成立，是中华人民共和国民政部批准成立的全国性非公募基金会，是建国后最早正式注册的大学教育基金会。2019年12月31日，民政部发布2018年度全国性社会组织评估等级公告，清华大学教育基金会再次被评为最高等级——5A级基金会。</p>
										<p>教育基金会的宗旨是：为推动山西师范大学教育事业的发展，提高教育质量和学术水平，加强学校与社会的联系，争取国内外团体和个人的支持与捐助。本教育基金会接受国内外企业、社会团体和个人的自愿捐赠。</p>
										<p>教育基金会以为清华大学的发展提供强有力的支持为使命，积极筹措各种社会资源，基金主要用于支持清华大学人才培养、教学科研、师资建设、校园基础设施建设等各方面工作，并发挥清华大学科技与人才的综合优势开展面向全社会的公益服务。对特定项目捐赠，可以按捐赠者的愿望定向使用。</p>
										<p>自1994年成立以来，经过25年的探索发展，山西师范大学教育基金会在资金筹集、项目管理、资产运营、团队建设等方面日趋完善，社会声誉与品牌形象不断提升，名列中国高校基金会前茅，先后倡导举办“中国高校基金会年会”、发起成立“中国高等教育学会教育基金工作研究分会”并成为理事长单位，为中国大学教育基金会的可持续发展、为我国高等教育事业与公益慈善事业的改革发展发挥了积极作用。</p>
									</div>
								</div>
								<div v-show="num==1">
									<div class="w-con">基金会简介</div>
								</div>
								<div v-show="num==2">
									<div class="w-con">基金会简介</div>
								</div>
								<div v-show="num==3">
									<div class="w-con">基金会简介</div>
								</div>
								<div v-show="num==4">
									<div class="w-con">基金会简介</div>
								</div>
							</div>

						</div>
					</div>

				</div>
				<!-- 正文内容 结束 -->
			</div>
		</div>
		<!-- 底部开始 -->
		<Footer></Footer>
		<!-- 底部结束 -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				pageName:'关于我们',
				title: '基金会简介',
				menuList: [{
						id: 1,
						name: '捐赠展示',
						ischildren: true,
						children: [{
								id: '1-1',
								name: "捐赠者列表"
							},
							{
								id: '1-2',
								name: "捐赠者介绍"
							},
							{
								id: '1-3',
								name: "捐赠者故事"
							}
						]
					},
					{
						id: 2,
						name: '受益者感言',
						ischildren: false,

					},
					{
						id: 3,
						name: '志愿者风采',
						ischildren: false,

					}
				]

			};
		},
		mounted() {
		},
		methods: {
			getNum(index, item) {
				this.num = index;
				this.title = item.name
			}
		}
	};
</script>
<style scoped>
	.w-cardbox {
		padding-top: 15px;
	}

	.w-card {
		background: #fff;
	}

	.w-contitle {
		font-size: 24px;
		color: rgba(118, 42, 42, 1);
		padding-top: 38px;
		padding-bottom: 20px;
		text-align: center;
		font-weight: 600;
	}
	.w-card-left{
		width: 26%;
		}
	.menuList {
		height: 464px;
		background: linear-gradient(180deg, rgba(226, 212, 189, 1) 0%, rgba(255, 255, 255, 1) 100%);
		margin-bottom: 58px;
	}

	.dian {
		width: 6px;
		height: 6px;
		background: rgba(102, 102, 102, 1);
		border-radius: 50%;
		margin-right: 13px;
		margin-left: 3vw;
	}

	.w-leftname {
		font-size: 18px;
		color: rgba(51, 51, 51, 1);
		font-weight: 600;
	}

	.w-leftname:hover {
		color: #791C1C;
	}

	.w-menuLeftbox {
		padding: 19px 0;
	}

	.active .w-leftname {
		color: #791C1C;
	}

	/* 右侧 */
	.w-home {
		width: 16px;
		display: block;
		height: 14px;
		margin-right: 15px;
	}

	.tabCon {
		padding: 35px 33px;
		box-sizing: border-box;
		width: 74%;
	}

	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

	.w-tabcon p {
		text-indent: 30px;
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		line-height: 2;
		margin-bottom: 20px;
		text-align: justify;
	}

	/* 相关操作 */
	/* 左侧下 */
	.w-xiang{
		font-size: 24px;
		color: #fff;
		text-align: center;
	}
	.w-banner_right {
		width: 100%;
		background: #731A1A;
		padding: 39px 22px;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
	}

	.w-banner_right ul {
		padding: 23px 0;
	}

	.w-banner_right li a {
		color: #fff;
		font-size: 18px;
		padding: 20px 0;
		display: block;
	}

	.w-banner_right li img {
		display: block;
		width: 90%;
		margin: 0 auto;
	}

	.todonate {
		display: block;
		color: #fff;
		font-size: 20px;
		width: 90%;
		margin: 0 auto;
		padding: 12px 0;
		background: #8D2F33;
		border-radius: 5px;
		border: 1PX solid #DD908E;
	}

	.phonebox {
		font-size: 20px;
		color: #fff;
		margin-top: 20px;
	}

	.phonebox img {
		width: 30px;
		display: block;
		margin-right: 9px;
	}
</style>
<style scoped>
	.w-width {
		width: 70%;
		margin: 0 auto;
	}
	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}

</style>
<style>
	.w-aboutus .el-tabs--left .el-tabs__header.is-left {
		width: 26%;
	}

	.w-aboutus .el-tabs--left .el-tabs__item.is-left {
		text-align: center;
		color: #333;
		font-size: 18px;
	}
	.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover{
		color: #692324;
	}
</style>
